<template>
  <div id="app">
    <Turntable ref="myRotate" :styles="styles" @get-prize-info="getPrizeInfo" />
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
export default defineComponent({
  name: "myApp",
  setup() {
    let styles = {
      r1: {
        w: "16rem",
        h: "16rem",
        img: require("./img/r1.png"),
      },
      r2: {
        w: "15rem",
        h: "15rem",
        img: require("./img/r2.png"),
      },
      r3: {
        w: "3.6rem",
        h: "4.225rem",
        img: require("./img/r3.png"),
      },
    };

    const myRotate = ref(null);

    function getPrizeInfo() {
      let data = "5";
      let result;
      switch (data) {
        case "1": //这里传奖品名称 或者 id 随意配置
          result = { deg: 0, txt: "100元" };
          break;
        case "2":
          result = { deg: 60, txt: "机油" };
          break;
        case "3":
          result = { deg: 120, txt: "8折工时券" };
          break;
        case "4":
          result = { deg: 180, txt: "空气滤芯1只" };
          break;
        case "5":
          result = { deg: 240, txt: "机油滤清器1只" };
          break;
        default:
          result = { deg: 30, txt: "很遗憾，你未中奖" };
          break;
      }

      myRotate.value.startRotate(result, function (res) {
        console.log(res.txt);
      });
    }
    return { styles, getPrizeInfo, myRotate };
  },
});
</script>

